<template>
  <div class="front shopNewsDetail">
    <div class="banner"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage?shopInfo.shopBackendImage:require('@/assets/front-img/shop/banner.png')})`}">
    </div>
    <div class="docWidth">
      <div class="bigTitle">公司动态</div>
      <div class="warpper">
        <div class="name">{{detail.name}}</div>
        <div class="time">{{detail.createTime | formatDate}}</div>
        <div class="detail" v-html="detail.remark"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { shopItemGetById } from "@/api/front-home";
export default {
  name: 'FrontShopNewsDetail',
  filters: {
    formatDate(value) {
      if (!value) return ''
      return value.toString().split(' ')[0]
    }
  },
  data() {
    return {
      detail: [],
      newsId: ''
    };
  },
  computed: {
    ...mapState({
      shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    })
  },
  created() {
    const shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    this.newsId = this.$route.query && this.$route.query.newsId && Number(this.$route.query.newsId)
    if (this.$store.state.front.shopId !== shopId) {
      this.$store.commit("front/SET_SHOPID", shopId)
      this.$store.dispatch('front/getShopInfo', shopId)
    }
    this.shopItemGetById(this.newsId)
  },
  methods: {
    shopItemGetById(id) {
      shopItemGetById({ id: id }).then((res) => {
        this.detail = res || {}
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.shopNewsDetail {
  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 328px;
  }
  .bigTitle {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
    padding: 0 25px;
    background: #965f29;
    margin-top: 40px;
  }
  .warpper {
    margin: 30px auto 0;
    padding: 30px;
    border: 1px solid #e5e5e5;
    .name {
      line-height: 2.2;
      font-size: 18px;
      font-weight: 400;
      color: #000;
      text-align: center;
    }
    .time {
      line-height: 1.5;
      font-size: 14px;
      font-weight: 400;
      color: #666;
      text-align: center;
    }
    .detail {
      padding: 20px;
      margin-top: 20px;
    }
  }
}
</style>